<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>编辑用户</title>
<link rel="stylesheet" href="/css/bootstrap.min.css">
<script src="/js/jquery/jquery.min.js"></script>
<script src="/js/jquery.validation/1.14.0/jquery.validate.min.js"></script>
<script src="/js/jquery.validation/1.14.0/messages_zh.min.js"></script>
<style>
input.error {
	border: 1px solid #E6594E;
}
</style>
</head>
<body>
	<div class="container">

		<form id="editUserForm">
			<br />
			<div class="form-group">
				<label for="username">用户名称：</label> <input type="text"
					class="form-control" id="username" name="username"
					value="${data.name}" placeholder="输入名称">
			</div>
			<div class="form-group">
				<label for="userage">用户年龄：</label> <input type="text"
					class="form-control" id="userage" name="userage"
					value="${data.age}" placeholder="输入年龄">
			</div>
			<div class="form-group">
				<label for="userrole">用户角色：</label> <input type="text"
					class="form-control" id="userrole" name="userrole" 
					value="${data.role}" placeholder="输入角色">
			</div>
			<div class="form-group">
				<label for="useremail">用户邮箱：</label> <input type="text"
					class="form-control" id="useremail" name="useremail"
					value="${data.email}" placeholder="输入邮箱">
			</div>
	</div>
	<div class="form-group">
		<button type="button" id="saveBtn" class="btn btn-success">提交</button>
		<button type="button" id="cancelBtn" class="btn btn-default">取消</button>
	</div>
	</form>
	</div>

	<script>
			var editUser = function(){
				if(!check().form()){ 
					return;  
				}
				$.ajax({
					   type: "GET",
					   dataType: "json",
					   url: "/user/edit",
					   data: {
							"id": ${data.id},
							"name": $("#username").val(),
							"age":$("#userage").val(),
							"role":$("#userrole").val(),
							"email":$("#useremail").val()
					   },
					   success: function(msg){
							$('#cancelBtn').click();			
					   }
				});
			}
			
			$('#saveBtn').on('click', function(){
				editUser();
			});
			
			$('#cancelBtn').on('click', function(){
				var index = parent.layer.getFrameIndex(window.name);
				parent.getUserPageList();
				parent.layer.close(index);
			});

			
			//校验字段是否正确 
            function check(){ 
                /*返回一个validate对象，这个对象有一个form方法，返回的是是否通过验证*/ 
                return $("#editUserForm").validate({ 
                            rules:{ 
                                username:{ 
                                    required:true
                                },
                                userage:{ 
                                    required:true                                   
                                },
 				userrole:{ 
                                    required:true                                   
                                }, 
				useremail:{ 
                                    required:true                                   
                                }
                            }, 
                            messages:{ 
                                username:{ 
                                    required:""
                                },
                                userage:{ 
                                    required:""                                
                                },
				userrole:{ 
                                    required:""
                                },
				useremail:{ 
                                    required:""
                                }
                            },
     
                        }); 
            } 
			
		</script>
</body>
</html>